<template>
  <div class='container'>
    <div class='app-row m-20-t'>
      <span class="title bold width-100 align-right">优惠券标题:</span>
      <el-input class='flex-1' v-model="name_value"></el-input>
    </div>
    <div class="m-20-t">
      <div class='app-row'>
        <span class="title bold width-100 align-right ">优惠券面额:</span>
        <el-input class='flex-1' placeholder="请设置优惠券面额" v-model="value_value" type='number'></el-input>
      </div>
      <div class='annotation m-10-t m-114-l' >
        <span>* 设置可以使用优惠券的金额，单位（元）</span>
      </div>
    </div>
    <div class='app-row m-30-t'>
      <span class="title bold width-100 align-right">所属门店:</span>
      <el-select class='flex-1' v-model="shop_value" placeholder="请选择" @change="choose_shop">
        <el-option
          v-for="item in shop_list"
          :key="item.id"
          :value="item.id"
          :label="item.true_name">
        </el-option>
      </el-select>
    </div>
    <div class="m-20-t">
      <div class='app-row'>
        <span class="title bold width-100 align-right">活动时间:</span>
        <el-date-picker
          v-model="value2"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          size="large"
          @change="date_change">
        </el-date-picker>
      </div>
      <div class='annotation m-10-t m-114-l'>
        <span>* 此活动的使用时间段</span>
      </div>
    </div>
    <div class="m-20-t">
      <div class='app-row'>
        <span class="bold " style="width: 120px">设置商品金额:</span>
        <el-input class='flex-1' placeholder="请设置最低商品金额" v-model="amount_value" type='number'></el-input>
      </div>
      <div class='annotation m-10-t m-114-l' >
        <span>* 设置可以使用优惠券的最低商品金额，单位（元）</span>
      </div>
    </div>
    <div class='flex m-30-t'>
      <span class="title bold width-100 align-right ">优惠券商品:</span>
      <el-select class='flex-1' v-model="good_value" placeholder="请选择" @change="choose_good">
        <el-option
          v-for="item in good_options"
          :key="item.id"
          :value="item.id"
          :label="item.name">
        </el-option>
      </el-select>

      
    </div>

    <div class='app-row m-20-t'>
      <span class="title bold width-100 align-right">介绍:</span>
      <div style="width: 90%">
       <el-input type="textarea" :rows="4" v-model="text_value" placeholder="请输入内容"></el-input>

      </div>
    </div>
    <div class="app-row j-c-c m-100-t">
      <el-button type="success" @click="edit_button">确认修改</el-button>
    </div>
  </div>
</template>

<script>
  import goods_request from "@/api/goods_request"
  import shop_request from "@/api/shop_request"
  import discount_request from "@/api/discount_request"
  export default {
    name: 'discount_edit',
    data() {
      return {
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        name_value: "",
        description_value: "",
        url_value: "",
        open_radio: "1",
        value_value: '',
        choose_dialog: false,
        setting_goods: false,
        text_value: '',
        rank_value: 0,
        amount_value: '',
        good_options: '',
        good_value: '',
        good_id: '',
        original_price: '',
        good_name: '',
        value2: '',
        shop_list: [],
        shop_value: "",
        shop_id: 0,
      }
    },
    computed: {
      start_time() {
        return this.value2[0].getFullYear() + '-' + (this.value2[0].getMonth() + 1) + '-' + this.value2[0].getDate()
      },
      end_time() {
        return this.value2[1].getFullYear() + '-' + (this.value2[1].getMonth() + 1) + '-' + this.value2[1].getDate()
      },
    },
    created() {
      this.get_good_list()
      this.get_detail(this.$route.query.id)
      this.get_shop_list()
  
    },
    mounted() {
  
    },

    methods: {
      choose_shop(e) {
        this.shop_id = e
      },
      get_shop_list() {
        this.listLoading = true
        let params ={
          pageSize: 10, 
          page: 1, 
          // name: this.keyword
        }
        shop_request.shop_list(params, res=> {
          this.listLoading = false,
          this.shop_list = res.data
        })
      },


      choose_good(e) {
        this.good_id = e
      },

      date_change(val) {
      },


      get_detail(id) {
        discount_request.detail_discount({id}, res=> {
          let result = res.data
          this.name_value = result.name
          this.value2 = [new Date(result.start_time),new Date(result.end_time)]
          this.good_id = result.condition
          this.value_value = result.value
          this.amount_value = result.limit_sum
          this.open_radio = result.is_close
          let params = {
            id: result.condition
          }
          goods_request.detail_goods(params, res=>{
            let result = res.data
            this.good_value = result.name
          })
          this.shop_id = result.seller_id
          let shop_params = {
            id: result.seller_id
          }
          if(result.seller_id != 0) {
            shop_request.detail_shop(shop_params, res=>{
              let result = res.data
              this.shop_value = result.true_name
            })
          }
        })
      },

      get_good_list() {
        let params = {
          pageSize: 100, page: 1
        }
        goods_request.goods_list( params, res=> {
          let good_options = []
          for (let item of res.data) {
            if (item.is_del!=2) {
              good_options.push(item)
            }
          } 
          this.good_options = good_options
        })
      },
      check_necessary_value() {
        if (this.name_value == '') {
          this.$message.error("请输入优惠券标题")
          return
        }
        if (this.amount_value == '') {
          this.$message.error("请设置最低金额")
          return
        }
        if (this.value_value == '') {
          this.$message.error("请填写优惠券价格")
          return
        }
        if (this.good_id == '') {
          this.$message.error("请选择优惠券商品")
          return
        }
        if (this.start_time == ''|| this.end_time == '') {
          this.$message.error("请选择优惠券生效时间")
          return false
        }
        return true
      },
      edit_button() {
        let if_necessary_value = this.check_necessary_value()
        if (!if_necessary_value) {
          return
        }

        let params = {
          id: this.$route.query.id,
          name: this.name_value,
          condition: this.good_id,
          limit_sum: this.amount_value,
          value: this.value_value,
          start_time: this.start_time,
          end_time: this.end_time,
          seller_id: this.shop_id
          // point: 0,
          // seller_id: 5,
          // type: 1,

          // description: this.description_value,

        }
        discount_request.edit_discount(params, res=> {
          this.$router.push('/marketing/discount')
        })
      },
      choose_goods() {
        this.choose_dialog = true
      },
      confirm_button() {
        this.choose_dialog = false
        this.setting_goods = true
      }

    }
  }
</script>

<style scoped>
@import "~@/styles/layout.scss";
</style>